<template>
    <div class="imagePreviewLayout">
        <div v-if="show" class="imagePreview" @mousewheel="mousewheel" ref="imageRef" :style="imagePreviewStyle">
            <img :style="{
                width: ImageBoxStyle.width + 'px',
                height: ImageBoxStyle.height + 'px',
            }" :src="BaseUrl + (props.Path[index] as string)">
        </div>

        <div v-if="show" class="close" @click="emit('update:show')" :style="{
            top: ImagePeripheryStyle.top + 10 + 'px',
            right: ImagePeripheryStyle.right + 10 + 'px'
        }">
            <CloseOutlined />
        </div>
        <div v-if="show" class="pre Button" @click="pre" :style="{
            top: ImagePeripheryStyle.top + ImageBoxStyle.height / 2 - 50 + 'px',
            left: ImagePeripheryStyle.left + 10 + 'px'
        }">
            <LeftOutlined />
        </div>
        <div v-if="show" class="next Button" @click="next" :style="{
            top: ImagePeripheryStyle.top + ImageBoxStyle.height / 2 - 50 + 'px',
            right: ImagePeripheryStyle.right + 10 + 'px'
        }">
            <RightOutlined />
        </div>

        <div v-if="show" class="restore" @click="restore" :style="{
            bottom: ImagePeripheryStyle.bottom + 20 + 'px',
            left: ImagePeripheryStyle.left + ImageBoxStyle.width / 2 - 35 + 'px'
        }">
            <OneToOneOutlined />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { CloseOutlined, LeftOutlined, RightOutlined, OneToOneOutlined } from '@ant-design/icons-vue'
import { useDraggable, useWindowSize } from '@vueuse/core';

const emit = defineEmits(['update:show'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    Path: {
        type: Array,
        default: () => []
    }
});

const imageRef = ref();
const { x, y, style, position } = useDraggable(imageRef);
const windowSize = useWindowSize();
const ImageStyle = reactive({
    width: 0,
    height: 0
});
const ImageBoxStyle = reactive({
    width: 0,
    height: 0,
})
const ImageScale = ref(1);
const imagePreviewStyle = ref('');

const ImagePeripheryStyle = reactive({
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
})

const BaseUrl = window.WIN_C.BaseUrl

const renderStyle = () => {
    var _x = position.value.x < 0 ? 0 : (position.value.x > windowSize.width.value - ImageBoxStyle.width ? windowSize.width.value - ImageBoxStyle.width : position.value.x);
    var _y = position.value.y < 0 ? 0 : (position.value.y > windowSize.height.value - ImageBoxStyle.height ? windowSize.height.value - ImageBoxStyle.height : position.value.y);
    imagePreviewStyle.value = `left:${_x}px;top:${_y}px;width:${ImageBoxStyle.width}px;height:${ImageBoxStyle.height}px`;
    ImagePeripheryStyle.top = _y < 0 ? 0 : _y;
    ImagePeripheryStyle.left = _x < 0 ? 0 : _x;
    var _bottom = windowSize.height.value - ImageBoxStyle.height - _y;
    var _right = windowSize.width.value - ImageBoxStyle.width - _x;
    ImagePeripheryStyle.bottom = _bottom < 0 ? 0 : _bottom;
    ImagePeripheryStyle.right = _right < 0 ? 0 : _right;
}

watch(style, () => {
    renderStyle();
})


const mousewheel = (e: WheelEvent) => {
    var _sell = ImageScale.value;
    _sell += -Math.sign(e.deltaY) * ImageScale.value * 0.1;
    ImageScale.value = _sell > 1.5 ? 1.5 : (_sell < 0.3 ? 0.3 : _sell)
    var _w = ImageStyle.width * ImageScale.value;
    var _h = ImageStyle.height * ImageScale.value;
    ImageBoxStyle.width = _w;
    ImageBoxStyle.height = _h;

    renderStyle();
}

const restore = () => {
    ImageScale.value = 1;
    ImageBoxStyle.width = ImageStyle.width;
    ImageBoxStyle.height = ImageStyle.height;
    x.value = (windowSize.width.value - ImageStyle.width) / 2;
    y.value = (windowSize.height.value - ImageStyle.height) / 2;
}


const GetImageWidth = (src: string) => {
    const img = new Image();
    img.onload = () => {
        ImageStyle.width = img.width;
        ImageStyle.height = img.height;
        restore();
    };
    img.src = BaseUrl + src;
};

const index = ref(0);

const runderImageIndex = () => {
    ImageScale.value = 1;
    GetImageWidth(props.Path[index.value] as string);
}

function pre() {
    var _i = index.value;
    _i--;
    _i == -1 ? (index.value = props.Path.length - 1) : (index.value = _i);
    runderImageIndex();
}
function next() {
    var _i = index.value;
    _i++;
    props.Path.length == _i ? (index.value = 0) : (index.value = _i);
    runderImageIndex();
}

onMounted(() => {
    runderImageIndex();
})








</script>
<style lang="less" scoped>
.imagePreviewLayout {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}

.imagePreview {
    pointer-events: all;
    user-select: none;
    position: absolute;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    img {
        pointer-events: none;
    }
}

.close {
    pointer-events: all;
    position: absolute;
    cursor: pointer;
    z-index: 10001;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: #333;
    transition: background 0.3s;
    background-color: rgba(255, 255, 255, 0.7);

    &:hover {
        color: #666;
        background-color: rgba(255, 255, 255, 1);
    }
}

.Button {
    pointer-events: all;
    z-index: 10001;
    position: absolute;
    cursor: pointer;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    line-height: 70px;
    text-align: center;
    font-size: 30px;
    opacity: 0;
    transition: opacity 0.3s;
    background-color: rgba(255, 255, 255, 0.7);

    &:hover {
        opacity: 1;
    }
}

.restore {
    pointer-events: all;
    z-index: 10001;
    position: absolute;
    cursor: pointer;
    width: 70px;
    height: 40px;
    border-radius: 5px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    background-color: rgba(255, 255, 255, 0.9);

    &:hover {
        opacity: 1;
    }
}
</style>